<template>
  <div class="statistics">
    <Map ref="Mapc"></Map>

    <!--地图侧边栏-->
    <div class="mapLeft">
      <div class="timecs">
        <el-date-picker
          v-model="time"
          @change="chooseTime"
          type="daterange"
          placeholder="选择日期">
        </el-date-picker>
      </div>


      <div style="width: 100%;height: calc(100% - .8rem);overflow-x: hidden;overflow-y: auto">
        <div id="bar" class="charts"></div>

        <div id="bar2" class="charts"></div>

        <div id="bar3" class="charts"></div>

        <div id="bar4" class="charts"></div>
      </div>
    </div>
    <!--地图侧边栏-->
  </div>
</template>

<script>
  import Map from './Map'
  import http from '../utils/http'
  import api from '../utils/api'

  import * as echarts from 'echarts';

  export default {
    name: "statistics",
    components: {Map},
    data() {
      return {
        dr: '1',
        checkList: [],
        areaId: "",
        timeStr: "",
        time: "",
        health: [],
        abnormal: [],
        death: [],
        hotheal: [],
        hotabnormal: [],
        hotdeath: [],
      }

    },
    mounted() {
      let _that = this;
      setTimeout(function () {
        _that.$refs.Mapc.creationMap();
        setTimeout(function () {
          _that.getcount();
        }, 1000)
      }, 300);
    },
    created() {
      this.areaId = window.sessionStorage.getItem('areaId');

    },
    methods: {
      drawbar(x, y) {
        let myChart = echarts.getInstanceByDom(document.getElementById('bar'));
        if (myChart == null) { // 如果不存在，就进行初始化
          myChart = echarts.init(document.getElementById("bar"));
        }
        let option = {
          title: {
            text: '各保护级别救助数量统计',
            x: 'center',
            y: 10
          },
          grid: {
            top: '20%',
            bottom: '20%',
            left: '10%',
            right: '10%'
          },
          xAxis: {
            type: 'category',
            data: x,
            axisLabel: {
              rotate: 30
            }
          },
          tooltip: {},
          yAxis: {
            type: 'value',
            name: '救助数量/只',
          },
          series: [
            {
              data: y,
              type: 'bar',
              showBackground: true,
              backgroundStyle: {
                color: 'rgba(180, 180, 180, 0.2)'
              }
            }
          ]
        };
        myChart.setOption(option);
        setTimeout(function () {
          myChart.resize();
        }, 10)
        window.addEventListener("resize", function () {
          myChart.resize();
        });
      },
      drawbar2(data) {
        let myChart = echarts.getInstanceByDom(document.getElementById('bar2'));
        if (myChart == null) { // 如果不存在，就进行初始化
          myChart = echarts.init(document.getElementById("bar2"));
        }
        let option = {
          title: {
            text: '各单位救助数量统计',
            left: '20%',
            y: 10
          },
          grid: {
            top: '20%',
            bottom: '20%',
            left: '20%',
            right: '20%'
          },
          tooltip: {
            trigger: 'item'
          },
          legend: {
            type: 'scroll',
            orient: 'vertical',
            icon: 'pin',
            right: 10,
            top: 10,
            bottom: 20
          },
          series: [
            {
              name: '救助统计',
              type: 'pie',
              center: ['40%', '50%'],
              radius: ['40%', '70%'],
              avoidLabelOverlap: false,
              label: {
                show: false,
                position: 'center'
              },
              emphasis: {
                label: {
                  show: true,
                  fontSize: '40',
                  fontWeight: 'bold'
                }
              },
              labelLine: {
                show: false
              },
              data: data
            }
          ]
        };
        myChart.setOption(option);
        setTimeout(function () {
          myChart.resize();
        }, 10)
        window.addEventListener("resize", function () {
          myChart.resize();
        });
      },
      drawbar3(x, y) {
        let myChart = echarts.getInstanceByDom(document.getElementById('bar3'));
        if (myChart == null) { // 如果不存在，就进行初始化
          myChart = echarts.init(document.getElementById("bar3"));
        }
        let option = {
          title: {
            text: '健康状况数量统计',
            x: 'center',
            y: 10
          },
          grid: {
            top: '20%',
            bottom: '20%',
            left: '10%',
            right: '10%'
          },
          xAxis: {
            type: 'category',
            data: x,
            axisLabel: {
              rotate: 30
            }
          },
          tooltip: {},
          yAxis: {
            type: 'value',
            name: '救助数量/只',
          },
          series: [
            {
              data: y,
              type: 'bar',
              showBackground: true,
              backgroundStyle: {
                color: 'rgba(180, 180, 180, 0.2)'
              }
            }
          ]
        };
        myChart.setOption(option);
        setTimeout(function () {
          myChart.resize();
        }, 10)
        window.addEventListener("resize", function () {
          myChart.resize();
        });
      },
      drawbar4(x, y) {
        let myChart = echarts.getInstanceByDom(document.getElementById('bar4'));
        if (myChart == null) { // 如果不存在，就进行初始化
          myChart = echarts.init(document.getElementById("bar4"));
        }
        let option = {
          title: {
            text: '处理结果数量统计',
            x: 'center',
            y: 10
          },
          grid: {
            top: '20%',
            bottom: '20%',
            left: '10%',
            right: '10%'
          },
          xAxis: {
            type: 'category',
            data: x,
            axisLabel: {
              rotate: 30
            }
          },
          tooltip: {},
          yAxis: {
            type: 'value',
            name: '救助数量/只',
          },
          series: [
            {
              data: y,
              type: 'bar',
              showBackground: true,
              backgroundStyle: {
                color: 'rgba(180, 180, 180, 0.2)'
              }
            }
          ]
        };
        myChart.setOption(option);
        setTimeout(function () {
          myChart.resize();
        }, 10)
        window.addEventListener("resize", function () {
          myChart.resize();
        });
      },
      chooseTime(data) {
        if (data != null) {
          let year = data[0].getFullYear();
          let month = (data[0].getMonth() + 1) > 10 ? (data[0].getMonth() + 1) : "0" + (data[0].getMonth() + 1);
          let day = data[0].getDate() > 10 ? data[0].getDate() : "0" + data[0].getDate();

          let years = data[1].getFullYear();
          let months = (data[1].getMonth() + 1) > 10 ? (data[0].getMonth() + 1) : "0" + (data[1].getMonth() + 1);
          let days = data[1].getDate() > 10 ? data[1].getDate() : "0" + data[1].getDate();

          this.timeStr = year + '-' + month + '-' + day + '~' + years + '-' + months + '-' + days;
        } else {
          this.timeStr = '';
        }
        this.getcount()
      },
      getcount() {
        let _that = this;
        (async function f() {
          let res = await http.get(api.statistics + '?areaId=' + _that.areaId + '&timeStr=' + _that.timeStr)
          if (res.data.code == '200') {
            let arr = [];
            res.data.data.locationList.forEach((e, index) => {
              let z = {
                id: e.serialNumber,
                name: '',
                borderColor: "#fff",
                fillColor: "",
                data: {
                  lon: e.lon,
                  lat: e.lat,
                  name: e.animalName,
                  number: e.serialNumber
                },
                iconSrc: "/static/images/tj_anchor_bottom_center.png",
                geojson: {coordinates: [e.lon, e.lat], type: "Point"}
              }
              arr.push(z)
            })
            _that.$refs.Mapc.previewshape(arr, 'dwtja');
            let x = [], y = [];
            res.data.data.levelInfo.typeList.forEach(t => {
              x.push(t.type);
              y.push(t.sum);
            })
            _that.drawbar(x, y);
            let data = [];
            res.data.data.xiangzhenInfo.forEach(t => {
              let z = {
                value: t.value, name: t.key
              }
              data.push(z);
            })
            _that.drawbar2(data);
            let x3 = [], y3 = [];
            res.data.data.healthInfo.typeList.forEach(t => {
              x3.push(t.type);
              y3.push(t.sum);
            })
            _that.drawbar3(x3, y3);
            let x4 = [], y4 = [];
            res.data.data.disposeInfo.typeList.forEach(t => {
              x4.push(t.type);
              y4.push(t.sum);
            })
            _that.drawbar4(x4, y4);
          } else {
            _that.$message({
              message: res.data.message,
              type: 'warning'
            });
          }
        })()
      }
    }
  }
</script>

<style scoped>
  @import "../../static/css/statistics.css";
</style>

<style>
  .el-checkbox__label {
    font-size: .16rem !important;
  }
</style>
